/*
 * @Author: xiaosihan 
 * @Date: 2024-08-18 17:05:49 
 * @Last Modified by: xiaosihan
 * @Last Modified time: 2024-08-19 21:58:13
 */

// 右侧面板

import clsx from "clsx";
import { autorun } from "mobx";
import { useEffect, useRef, useState } from "react";
import styles from "./rightPlaneDemo.module.less";
import rightPlaneDemoStore from "./rightPlaneDemoStore";
import MessageListDemo from "./MessageListDemo/MessageListDemo";
import AttributeDemo from "./AttributeDemo/AttributeDemo";

// 右侧面板demo
export default function RightPlaneDemo() {

    const dom = useRef<HTMLDivElement | null>(null);
    const [data, setData] = useState({});
    const [show, setShow] = useState(rightPlaneDemoStore.show);
    const [rightPlaneTab, setRightPlaneTab] = useState(rightPlaneDemoStore.rightPlaneTab);

    useEffect(() => {

    }, []);

    useEffect(() => autorun(() => {
        setShow(rightPlaneDemoStore.show);
        setRightPlaneTab(rightPlaneDemoStore.rightPlaneTab);
    }), []);

    return (
        <div className={clsx(styles.rightPlaneDemo, show && styles.show)} >
            <div className={styles.menu} >
                <span
                    className={clsx(styles.menu_itme, rightPlaneTab === "question" && styles.active)}
                    onClick={() => {
                        rightPlaneDemoStore.setRightPlaneTab("question");
                    }}
                >问题</span>
                <span
                    className={clsx(styles.menu_itme, rightPlaneTab === "attribute" && styles.active)}
                    onClick={() => {
                        rightPlaneDemoStore.setRightPlaneTab("attribute");
                    }}
                >属性</span>
            </div>

            {rightPlaneTab === "question" && <MessageListDemo />}

            {rightPlaneTab === "attribute" && <AttributeDemo />}

        </div>
    );

}